<template>
  <div v-if="isNull === true" class="no-pic">
    <img :src="nullPng" width="40%" alt="logo">
    <p>暂无审核记录</p>
  </div>
  <div v-else>
    <el-scrollbar wrapStyle="height: 1000px;padding: 0 25px;overflow-y: scroll;">
      <ul>
        <li v-for="(item,index) in allCkList" v-bind:key="index">
          <div class="title">
            <i>{{ckArr[index]}}</i>
            <span v-if="item.check_type === '1'">初审</span>
            <span v-else-if="item.check_type === '2'">复审</span>
            <p>操作员：<span>{{item.truename}}</span></p>
          </div>
          <div class="content">
            <span class="time">{{item.check_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
            <span v-if="item.check_result === '通过'" style="color:#109ef0">{{item.check_result}}</span>
            <span v-else>{{item.check_result}}</span>
            <p v-if="item.reject_reason !== '' && item.reject_reason !== undefined">{{item.reject_reason}}</p>
            <div>
              <span>{{item.check_remark === '' ? '无' : item.check_remark}}</span>
              <span v-if="item.check_type === '2'">通话编号：{{item.call_num === '' ? '无' : item.call_num}}</span>
            </div>
          </div>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<style scoped>
  .no-pic {
    text-align: center;
  }
  .no-pic img {
    margin-top: 160px;
  }
  .no-pic p {
    color: #4d4d4d;
    padding: 10px 0;
  }
  .check ul {
    padding-left: 0;
  }
  .check ul li{
    list-style: none;
    padding-bottom: 30px;
    /* border-bottom: 1px solid #dcdfe6; */
  }
  .title{
    margin-bottom: 15px;
  }
  .title i{
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-style: normal;
    display: inline-block;
    text-align: center;
    background-color: #109ef0;
    color: #fff;
    font-size: 16px;
    border-radius: 50%;
  }
  .title > span {
    font-size: 16px;
    margin-left: 10px;
    color: #303133;
  }
  .title p{
    float: right;
    color: #909090;
    font-size: 15px;
    margin:0;
    line-height: 22px;
  }
  .content {
    width: 100%;
    background-color: #f5f7fa;
    margin-top: 25px;
    border-radius: 5px;
    padding-bottom: 30px;
  }
  .content span:first-child {
    font-size: 14px;
    margin: 25px 0 25px 23px;
    display: inline-block;
    color: #909090;
  }
  .content span:nth-child(2) {
    float: right;
    color: #ff5f5f;
    margin:25px 23px 0 0;
    font-size: 14px;
  }
  .content p {
    width: 90%;
    margin:0 auto;
    padding: 15px;
    background-color: #fff;
    line-height: 1.5;
    border-radius: 5px;
    color: #303133;
    font-size: 14px;
    margin-bottom: 20px;
  }
  .content div {
    width: 90%;
    margin:0 auto;
    padding: 15px;
    background-color: #f0f0fa;
    line-height: 1.5;
    border-radius: 5px;
    color: #303133;
    font-size: 14px;
  }
  .content > div span:first-child {
    margin: 0;
    color: #666;
    display: block;
  }
  .content > div span:nth-child(2) {
    float: none;
    color: #666;
    display: block;
    border-top: 1px solid #8c8c8c;
    margin-top: 10px;
    padding-top: 10px;
  }
</style>
<script>
import { allCheckList } from '@/api/order'
import nullPng from '@/assets/common_images/null.png'
export default {
  data() {
    return {
      oid: this.$route.params.id,
      nullPng: nullPng,
      isNull: true,
      allCkList: [],
      ckArr: []
    }
  },
  mounted() {
    this.getList()
  },
  watch: {
    '$route'(to, from) {
      // 对路由变化作出响应...
      this.oid = this.$route.params.id
      this.getList()
    }
  },
  methods: {
    getList() {
      allCheckList({ oid: this.oid }).then(response => {
        this.allCkList = response.data
        const len = this.allCkList.length
        for (const k in this.allCkList) {
          this.ckArr[k] = len - k
        }
        if (len > 0) {
          this.isNull = false
        }
      })
    }
  }
}
</script>
